<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜡笔小新排行榜</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="icon.css">
</head>
<body>
    <div class="page">
        <!--顶部导航区域-->
        <header class="top">
            <div class="top-title">蜡笔小新剧场版</div>
            <!--主分类标签-->
            <nav class="tabs">
                <ul>
                    <li class="tab-item tab-active">综合榜</li>
                    <li class="tab-item ">热搜榜</li>
                    <li class="tab-item ">好评榜</li>
                </ul>
            </nav>
            <!--子分类筛选-->
            <nav class="cats">
                <ul class="cat-list">
                    <li class="cat-item cat-active">全部</li>
                    <li class="cat-item">高分</li>
                </ul>
            </nav>
        </header>

        <main class="list">
            <!--排行榜项模板，带排名及内容-->
            <a href="#" class="sku">
                <div class="content">
                    <div class="cover">
                        <img src="imgs/daren.png" class="cover-img" >
                        <img src="imgs/rank-top1.png" class="cover-rank">
                    </div>
                    <div class="info">
                        <div class="sku-title">蜡笔小新：大人王国的反击</div>
                        <div class="types">
                            <span class="type-item">评分：9.8</span>
                        </div>
                        <div class="btn">
                            立即观看
                        </div>
                        <div class="desc">
                            <span class="source">bilibili</span>
                            <i class="iconfont icon-comment"></i>
                            <span class="desc-number">1370</span>
                            <i class="iconfont icon-thumb"></i>
                            <span class="desc-number">999+</span>

                        </div>
                    </div>
                </div>
                <div class="comment">
                    <strong>简介：</strong>这天在小新居住的春日部附近，突然新开了一家叫“20世纪博”的游乐园。游乐园里到处播放着从前20世纪的旧的电视节目和电影，这里，一切都是从前时光的回放。每一个到了这里的大人，都沉浸在过去的旧时光里，而对...
                </div>
            </a>
            <a href="#" class="sku">
                <div class="content">
                    <div class="cover">
                        <img src="imgs/zhanguo.png" class="cover-img" >
                        <img src="imgs/rank-top2.png" class="cover-rank">
                    </div>
                    <div class="info">
                        <div class="sku-title">蜡笔小新：呼风唤雨！战国大合战</div>
                        <div class="types">
                            <span class="type-item">评分：9.8</span>
                        </div>
                        <div class="btn">立即观看</div>
                        <div class="desc">
                            <span class="source">bilibili</span>
                            <i class="iconfont icon-comment"></i>
                            <span class="desc-number">1781</span>
                            <i class="iconfont icon-thumb"></i>
                            <span class="desc-number">999+</span>

                        </div>
                    </div>
                </div>
                <div class="comment">
                    <strong>简介：</strong>某一晚，野原一家同时梦见了古装剧里才会出现的”古代美女”，虽然全家人都觉得很不可思议，却也没有深入追究。当天下午小新从幼儿园回来时，看到小白正在庭院里拼命挖洞，而当小新也跟着开始挖掘后，竟然挖出了...
                </div>
            </a>
            <a href="#" class="sku">
                <div class="content">
                    <div class="cover">
                        <img src="imgs/xiyang.png" class="cover-img" >
                        <img src="imgs/rank-top3.png" class="cover-rank">
                    </div>
                    <div class="info">
                        <div class="sku-title">蜡笔小新： 呼风唤雨！夕阳下的春日部男孩</div>
                        <div class="types">
                            <span class="type-item">评分：9.8</span>
                        </div>
                        <div class="btn">立即观看</div>
                        <div class="desc">
                            <span class="source">bilibili</span>
                            <i class="iconfont icon-comment"></i>
                            <span class="desc-number">1767</span>
                            <i class="iconfont icon-thumb"></i>
                            <span class="desc-number">999+</span>

                        </div>
                    </div>
                </div>
                <div class="comment">
                    <strong>简介：</strong>春日部防卫队在电影院探险，不知不觉除了小新以外的人都不见了。到了晚上，小新一家人一起去电影院找电影，突然上映了西部片，回过神来，小新一家竟然穿越到了电影里的故事。
                    </div>
            </a>
            <a href="#" class="sku">
                <div class="content">
                    <div class="cover">
                        <img src="imgs/baba.png" class="cover-img" >
                        <img src="imgs/rank-top4.png" class="cover-rank">
                    </div>
                    <div class="info">
                        <div class="sku-title">蜡笔小新：决一胜负！逆袭的机器人爸爸</div>
                        <div class="types">
                            <span class="type-item">评分：9.7</span>
                        </div>
                        <div class="btn">立即观看</div>
                        <div class="desc">
                            <span class="source">bilibili</span>
                            <i class="iconfont icon-comment"></i>
                            <span class="desc-number">628</span>
                            <i class="iconfont icon-thumb"></i>
                            <span class="desc-number">999+</span>

                        </div>
                    </div>
                </div>
                <div class="comment">
                    <strong>简介：</strong>美好的周末假期，野原新之助（矢岛晶子 配音）和爸爸广志（藤原启治 配音）一起去看机器人的科幻电影，走出电影后的父子俩兴奋地大玩合体游戏，谁知广志却不慎扭伤了腰。忍受不了老婆的碎碎念，广志去医院看病，可...
                    </div>
            </a>
            <a href="#" class="sku">
                <div class="content">
                    <div class="cover">
                        <img src="imgs/shaorou.png" class="cover-img" >
                        <img src="imgs/rank-top5.png" class="cover-rank">
                    </div>
                    <div class="info">
                        <div class="sku-title">蜡笔小新：呼风唤雨！光荣烧肉之路</div>
                        <div class="types">
                            <span class="type-item">评分：9.7</span>
                        </div>
                        <div class="btn">立即观看</div>
                        <div class="desc">
                            <span class="source">bilibili</span>
                            <i class="iconfont icon-comment"></i>
                            <span class="desc-number">1370</span>
                            <i class="iconfont icon-thumb"></i>
                            <span class="desc-number">999+</span>

                        </div>
                    </div>
                </div>
                <div class="comment">
                    <strong>简介：</strong>野原一家本来难得地能在晚饭时吃一顿豪华的烧肉大餐，却因为一名意外访客的到来带来了噩梦，由于被“Sweet Boy”怀疑收藏了他们的秘密武器，结果落得个全国通缉的下场，陷入无穷无尽的逃亡之中，朋友、邻居...
                </div>
            </a>
            <a href="#" class="sku">
                <div class="content">
                    <div class="cover">
                        <img src="imgs/bji.png" class="cover-img" >
                    </div>
                    <div class="info">
                        <div class="sku-title">蜡笔小新：超级美味B级美食大逃亡</div>
                        <div class="types">
                            <span class="type-item">评分：9.7</span>
                        </div>
                        <div class="btn">立即观看</div>
                        <div class="desc">
                            <span class="source">bilibili</span>
                            <i class="iconfont icon-comment"></i>
                            <span class="desc-number">2172</span>
                            <i class="iconfont icon-thumb"></i>
                            <span class="desc-number">999+</span>

                        </div>
                    </div>
                </div>
                <div class="comment">
                    <strong>简介：</strong>阳光明媚的一天，盛大的B级美食嘉年华在春日部市召开，野原新之助（矢岛晶子 配音）看到新闻后兴奋非常，于是和樱田妮妮、风间彻、代全林、佐藤正男等好朋友们商定，偷偷前往嘉年华大饱口福。与此同时，B级美...
                </div>
            </a>
        </main>
    </div>
</body>
</html>